<template>
  <div>
    <BasicModal
      v-bind="$attrs"
      :title="t('routes.demo.partManagerSettings.AttachmentType')"
      @register="register"
      @ok="handleSubmit"
      @cancel="handleClose"
      :destroyOnClose="true"
      :minHeight="150"
      :width="500"
    >
      <Row>
        <Col span="24">
          <Select
            v-model:value="fileType"
            style="width: 100%"
            :placeholder="t('routes.demo.partManagerSettings.AttachmentTypePlaceholder')"
            allowClear
          >
            <SelectOption
              v-for="(item, index) in FolderList"
              :key="index"
              :value="item.fileTypeId"
              >{{ item.fileTypeName }}</SelectOption
            >
          </Select>
        </Col>
        <Col span="12" style="margin-top: 10px">
          <Upload name="file" :customRequest="customUpload">
            <a-button>{{ t('common.upload') }}</a-button>
          </Upload></Col
        >
        <Col span="12" style="margin-top: 10px">
          <p v-if="fileList">{{ fileName }}</p></Col
        >
      </Row>
    </BasicModal>
  </div>
</template>

<script lang="ts" setup>
  import { ref } from 'vue';
  import { useI18n } from '/@/hooks/web/useI18n';
  import { useMessage } from '/@/hooks/web/useMessage';
  import { BasicModal, useModalInner } from '/@/components/Modal';
  import { Select, SelectOption, Upload, Row, Col } from 'ant-design-vue';

  import { getAllFileType } from '/@/api/demo/document';

  const { t } = useI18n();
  const { createMessage } = useMessage();
  const emit = defineEmits(['register', 'addPart']);
  // 附件上传列表
  const fileList = ref({});
  const FolderId = ref<any>('');
  const FolderList = ref<any>([]);
  const fileType = ref<any>(undefined);
  const fileName = ref<any>('');
  // 附件上传类型以及文件名称
  const uploadFileList = ref<any>({
    fileType: '',
    fileName: '',
  });

  // 上传
  const customUpload = (e: any) => {
    fileList.value = e.file;
    fileName.value = e.file.name;
  };

  // 定义弹窗是否可见
  const [register, { setModalProps, closeModal }] = useModalInner((data) => {
    setModalProps({ confirmLoading: false });
    FolderId.value = data.FolderId;
    getAllFileType(data.FolderId).then((res) => {
      FolderList.value = res.filter((item) => item.isBd === '0').filter((e) => e.isAttach == '1'); // 获取当前目录下绑定的图档类型 isBD - 0表示图档 1表示表单 isAttach 1标识零件附件勾选
    });
  });

  // 提交
  async function handleSubmit() {
    if (!fileType.value) {
      createMessage.warning(t('routes.demo.partManagerSettings.AttachmentTypePlaceholder'));
    } else if (!fileName.value) {
      createMessage.warning(t('routes.demo.partManagerSettings.UploadFilePlaceholder'));
    } else {
      uploadFileList.value.fileType = fileType.value;
      uploadFileList.value.fileName = fileName.value;
      emit('addPart', uploadFileList.value, fileList.value);
      handleClose();
    }
  }

  // 关闭弹窗
  const handleClose = () => {
    setModalProps({ confirmLoading: false });
    fileList.value = {};
    fileName.value = '';
    FolderId.value = '';
    fileType.value = undefined;
    FolderList.value = [];
    uploadFileList.value = {};
    closeModal();
  };
</script>

<style lang="less" scoped>
  ::v-deep(.ant-upload-list) {
    display: none !important;
  }
</style>
